<script>
import { numberFixed } from '@/utils'

export default {
  name: 'doughnut-chart-item',
  props: {
    percent: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 200
    },
    color: {
      type: String,
      default: 'rgba(0,0,0,1)'
    }
  },
  computed: {
    transform() {
      const deg = numberFixed(this.percent * 360)
      return deg > 180
        ? { right: 'rotate(180deg)', left: `rotate(${deg - 180}deg)` }
        : { right: `rotate(${deg}deg)`, left: 'none' }
    },
    borderRadius() {
      return {
        right: `${0.5 * this.size}px 0 0 ${0.5 * this.size}px`,
        left: `0 ${0.5 * this.size}px ${0.5 * this.size}px 0`
      }
    }
  }
}
</script>

<template>
  <div
    :style="{width: size+'px', height: size+'px'}"
    class="dc-wrap"
  >
    <div class="dc-right">
      <div
        :style="{
            backgroundColor: color,
            transform: transform.right,
            borderRadius: borderRadius.right
            }"
        class="dc-r-b"
      ></div>
    </div>
    <div class="dc-left">
      <div
        :style="{
            backgroundColor: color,
            transform: transform.left,
            borderRadius: borderRadius.left
            }"
        class="dc-l-b"
      ></div>
    </div>
  </div>
</template>

<style lang="scss">
$size: 300px;
$borderSize: 16%;

.dc-wrap {
  position: absolute;
  top: 0;
  left: 0;
}

.dc-right,
.dc-left {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.dc-right {
  right: 0;
}

.dc-left {
  left: 0;
}

.dc-r-b,
.dc-l-b {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  &::before {
    position: absolute;
    top: $borderSize;
    content: '';
    display: block;
    width: 2 * (100 - 2 * $borderSize);
    height: 100 - 2 * $borderSize;
    background-color: #fff;
    border-radius: 50%;
  }
}

.dc-r-b {
  right: 100%;
  transform-origin: right center;

  &::before {
    right: -(100 - 2 * $borderSize);
  }
}

.dc-l-b {
  left: 100%;
  transform-origin: left center;

  &::before {
    left: -(100 - 2 * $borderSize);
  }
}
</style>
